<script setup>
import { ref } from 'vue';
import router from "@/router/index.js";
import {getImgCode, subLoginForm} from "@/api/login.js";
import {useUserStore} from "@/stores/index.js";

/**
 * 登录表单
 * */
const loginForm = ref({
  userAccount: '',
  userPassword: '',
  code: '',
  key:''
})
const checked = ref(false);
const onClickLeft = () => history.back();

/**
 * 图形验证码
 * @type {[null] extends [Ref] ? IfAny<null, Ref<null>, null> : Ref<UnwrapRef<null>, UnwrapRef<null> | null>}
 */
const verifyKey = ref(null);
const base64Img = ref(null);
const getPicCode = () => {
  getImgCode().then(res => {
    if (res.data.code === 1) {
      verifyKey.value = res.data.data.key
      base64Img.value = res.data.data.img
    } else {
      // eslint-disable-next-line no-undef
      showToast('图形验证码获取频繁，稍后再试')
    }
  }).catch(err => {
    console.log(err);
  });
};
getPicCode();

/**
 * 跳转到注册页面
 */
const goRegister = () => {
  router.replace({
    path: '/register',
  })
}

/**
 * 校验规则
 */
const verify= () => {
  if(!/^[a-zA-Z0-9]{6,16}$/.test(loginForm.value.userAccount)) {
    // eslint-disable-next-line no-undef
    showToast('账号格式不正确')
    return false
  }
  if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d\S]{6,16}$/.test(loginForm.value.userPassword)) {
    // eslint-disable-next-line no-undef
    showToast('密码格式不正确')
    return false
  }
  if (!/^\w{4}$/.test(loginForm.value.code)) {
    // eslint-disable-next-line no-undef
    showToast('请输入正确的图形验证码后获取')
    return false
  }
  if (!checked.value) {
    // eslint-disable-next-line no-undef
    showToast('请阅读并同意用户协议')
    return false
  }
  return true
}

/**
 * 登录
 */
const userStore = useUserStore()

const login = () => {
  if (!verify()) {
    return
  }
  loginForm.value.key = verifyKey.value
  subLoginForm(loginForm.value).then(res => {
    if (res.data.code === 1) {
      userStore.setUserInfo(res.data.data.id,res.data.data.userAccount)
      userStore.setToken(res.data.data.token)
      // eslint-disable-next-line no-undef
      showToast('登录成功')
      router.push({ path: '/' })
    }else if (res.data.code === 40050) {
      // eslint-disable-next-line no-undef
      showToast('该账号状态异常，请联系管理员')
    }
  }).catch(err => {
    console.log(err)
  })
}
</script>

<template>
  <div class="login-page">
    <van-nav-bar
      fixed
      left-arrow
      left-text="返回"
      placeholder
      title="登录"
      @click-left="onClickLeft"
    />
    <div class="login-card">
      <h1>账号登录</h1>
      <p>使用您注册过的账号进行登录</p>
      <div class="login-form">
        <div class="form-item">
          <input v-model="loginForm.userAccount" class="inp" maxlength="16" placeholder="请输入账号" type="text">
        </div>
        <div class="form-item">
          <input v-model="loginForm.userPassword" class="inp" maxlength="16" placeholder="请输入密码" type="password">
        </div>
        <div class="form-item">
          <input v-model="loginForm.code" class="inp" maxlength="6" placeholder="请输入图形验证码" type="text">
          <img v-if="base64Img" :src="'data:image/png;base64,' + base64Img" alt="" @click="getPicCode">
          <img v-else alt="" src="../../assets/code_fail.png" @click="getPicCode">
        </div>
        <div class="form-item-checked">
          <van-checkbox v-model="checked" style="margin-right: 10px"></van-checkbox>我已阅读本站<router-link to="#">《用户协议》</router-link>
        </div>
        <div class="login-btn" @click="login">登录</div>
        <div class="login-other">
          <span>忘记密码</span>
          <span @click="goRegister">前往注册</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.login-page {
  height: 100vh;
  background: #f8f8f8;
}

.login-page .login-card h1 {
  color: #1e1e1e;
  font-size: 28px;
  font-weight: 500;
  padding: 10px 30px;
}

.login-page .login-card p {
  color: #9e9e9e;
  font-size: 14px;
  padding: 0 30px;
}

.login-card {
  margin-top: 10px;
}

.login-form {
  margin-top: 20px;
  padding: 0 20px;
}

.form-item {
  border-bottom: 1px solid #f3f1f2;
  padding: 8px;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
}

.form-item-checked {
  border-bottom: 1px solid #f3f1f2;
  padding: 8px;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.form-item .inp {
  display: block;
  border: none;
  outline: none;
  height: 32px;
  font-size: 14px;
  flex: 1;
}

.form-item img {
  width: 94px;
  height: 31px;
}

.login-btn {
  width: 100%;
  height: 42px;
  margin-top: 10px;
  background: linear-gradient(90deg, #3cd7ec, #1125ff);
  color: #fff;
  border-radius: 39px;
  box-shadow: 0 10px 20px 0 rgba(0,0,0,.1);
  letter-spacing: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-btn:active {
  background: linear-gradient(90deg, #3cd7ec, rgba(17, 37, 255, 0.76));
}

.login-other{
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding: 0 20px;
  font-size: 14px;
  color: #9e9e9e;
}
</style>
